<template>
  <div class="button-box" v-bind="$attrs" :style="{'--bgColor':bgColor,'--color':color}">
    <button class="full-rounded" >
      <span>
        <slot></slot>
      </span>
      <div class="border full-rounded"></div>
    </button>
  </div>
</template>

<script>
export default {
  name: "MiButton2",
  props:{
    color:{
      type:String,
      default:"white"
    },
    bgColor:{
      type:String,
      default:"white"

    }
  }
}
</script>

<style scoped lang="less">
  .button-box{
    width: 100%;
    height: 100%;
    button {
      font-size: 16px;
      position: relative;
      margin: auto;
      width: 100%;
      height: 100%;
      min-width: 40px;
      min-height:30px;
      //padding: 1em 2.5em 1em 2.5em;
      border: none;
      background: var(--bgColor);
      transition: all 0.1s linear;
      box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1);
      cursor: pointer;
      caret-color: transparent;
    }

    button:active {
      transform: scale(0.95);
    }

    button span {
      color: var(--color);
    }

    button .border {
      position: absolute;
      border: 0.15em solid  var(--bgColor);
      transition: all 0.3s 0.08s linear;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform: translate(-50%, -50%);
    }

    button:hover .border {
      display: block;
      width:calc(105%);
      height:calc(105%);
    }

    .full-rounded {
      border-radius: 2em;
    }
  }
</style>